﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0054)http://www.naturefw.com/test/quickpager/PageTurn01.htm -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>分页控件的测试</title>
    <script src="../jquery-1.7.1.js"></script>
    <script src="js/jquery.pagination.js"></script>
</head>
<body>
    插件自动填充
    <div id="test" class="pager">
    </div>
    <hr />
    全部  <button id="btn5">翻到第五页</button>
    <br />
    <div id="div1" class="pager">
        <span style="cursor: pointer;">共<span name="recordCount" style="color: Red;">102</span>条记录</span>
        <span style="cursor: pointer;">第<span name="pageIndex" style="color: Red;">1</span>/<span name="pageCount" style="color: Red;">11</span>页</span>
        <span style="cursor: pointer;">每页<span name="pageSize" style="color: Red;">10</span>条记录</span>
        <span name="first" class="disabled" style="cursor: default;">首页</span>
        <span name="prev" class="disabled" style="cursor: default;">上一页</span>
        <span name="nav" style="cursor: pointer;"><a class="navi"><span style="color: #999">1</span></a></span>
        <span name="next" class="" style="cursor: pointer;">下一页</span>
        <span name="last" class="" style="cursor: pointer;">末页</span>
        <input name="goNum" class="cssTxt" type="text" size="1">
        <span name="go" style="cursor: pointer;">GO</span>
    </div>
    <hr />
    没有导航
    <br />
    <div id="div2" class="pager">
        <span style="cursor: pointer;">共<span name="recordCount" style="color: Red;">102</span>条记录</span>
        <span style="cursor: pointer;">第<span name="pageIndex" style="color: Red;">1</span>/<span name="pageCount" style="color: Red;">11</span>页</span>
        <span style="cursor: pointer;">每页<span name="pageSize" style="color: Red;">10</span>条记录</span>
        <span name="first" class="disabled" style="cursor: default;">首页</span>
        <span name="prev" class="disabled" style="cursor: default;">上一页</span>
        <span name="next" class="" style="cursor: pointer;">下一页</span>
        <span name="last" class="" style="cursor: pointer;">末页</span>
        <input name="goNum" class="cssTxt" type="text" size="1">
        <span name="go" style="cursor: pointer;">GO</span>
    </div>
    <hr />
    没有描述(第一页默认不显示首页和上一页2个按钮)
    <br />
    <div class="pager">
        <span name="first" class="disabled" style="cursor: default;">首页</span>
        <span name="prev" class="disabled" style="cursor: default;">上一页</span>
        <span name="next" class="" style="cursor: pointer;">下一页</span>
        <span name="last" class="" style="cursor: pointer;">末页</span>
    </div>
    只有导航
    <br />
    <div class="pager">
        <span name="nav" style="cursor: pointer;"><a class="navi"><span style="color: #999">1</span></a></span>
    </div>
    <hr />
    <hr />
    更换样式(css)：
        <select id="Select1" name="D1">
            <option value="default">default</option>
            <option value="badoo">badoo</option>
            <option value="black">black</option>
            <option value="black-green">black-green</option>
            <option value="black-red">black-red</option>
            <option value="black2">black2</option>
            <option value="digg">digg</option>
            <option value="flickr">flickr</option>
            <option value="flickr">flickr</option>
            <option value="grayr">grayr</option>
            <option value="jogger">jogger</option>
            <option value="megas512">megas512</option>
            <option value="meneame">meneame</option>
            <option value="msdn">msdn</option>
            <option value="quotes">quotes</option>
            <option value="sabrosus">sabrosus</option>
            <option value="scott">scott</option>
            <option value="starcraft2">starcraft2</option>
            <option value="technorati">technorati</option>
            <option value="tres">tres</option>
            <option value="viciao">viciao</option>
            <option value="yahoo">yahoo</option>
            <option value="yahoo2">yahoo2</option>
            <option value="yellow">yellow</option>
            <option value="youtube">youtube</option>
        </select>
</body>
</html>
<script>
    $("#btn5").on('click', function () {
        $("#div1").PageChanged(5);
    });

    $(".pager").pagination({
        recordCount: 3211,       //总记录数
        pageSize: 10,           //一页记录数
        onPageChange: function (pageIndex) {
            document.title = pageIndex;
        }
    });

    window.getQueryString = function (value) {
        var reg = new RegExp("(^|&)" + value + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    var css = getQueryString("css");
    if (!css || !css.length) css = "msdn";
    document.writeln('<link href="css/' + css + '.css" rel="stylesheet" />');
    $("#Select1").val(css).on('change', function () {
        window.location.href = window.location.pathname + "?css=" + $(this).val();
    });
</script>
